<template>
    <!-- 证据管理 -->
    <div class="proof ffffff flexbetween">
        <div class="l">
            <!-- <div style="height:2px;background-color: #F5F6F7;"></div> -->
            <div class="nav-title padding15"></div>
            <el-menu
                default-active="proofSign"
                :router="true"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#fff"
                text-color="#333"
                active-text-color="#1063f1">
                <el-submenu index="proofSign">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>签署存证</span>
                    </template>
                    <el-menu-item index="proofSign">签署记录</el-menu-item>
                </el-submenu>
                <el-menu-item index="proofGo">
                    <i class="el-icon-eleme"></i>
                    <span slot="title">出证记录</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="r">
            <div style="height:2px;background-color: #F5F6F7;"></div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		}
    }
}
</script>

<style lang='scss'>
.proof {
    .el-submenu .el-menu-item{
        min-width: 100%;
    }
}
</style>

<style lang="scss" scoped>
.proof{
    height: 100%;
    .l{
        height: 100%;
        min-width: 190px;
        box-sizing: border-box;
        border-right:1px solid #e4e4e4;
        .nav-title{
            height: 50px;
            border-bottom:1px solid #e4e4e4;
        }
    }
    .r{
        flex-grow: 1;
        height: 100%;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
    }
}
</style>